 /**
  * 我的发布列表页面
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform,
    AsyncStorage,
    Dimensions,
    ActivityIndicator //记载指示器 菊花
} from 'react-native';
 import {PullList} from 'react-native-pull';
var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar
var TextXunPan = require('../Mine/test_xunpan.json');//询盘测试数据
 var Width = Dimensions.get('window').width; //屏宽
 var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

 export default class FBRecord extends Component {

     constructor(props) {
         super(props);
         this.dataSource = [{
             type:1,
             time:'10月19日20:1',
             title: '浓香型',
             origin: '四川绵阳',
             number: '500吨',
             year:'6年',
             price:'20000/吨'
         }];
         this.state = {
             list: (new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})).cloneWithRows(this.dataSource),
         };
     }
     onPullRelease = (resolve) => {
         //do something
         setTimeout(() => {
             resolve();
         }, 3000);
     }

     componentDidMount() {

     }
     render() {
         return (
             <View style={styles.container}>
                 <NavigatorBar title='我的发布' widthWH={Platform.OS == 'ios' ? 15:15} leftBtnName = 'back' leftpress={()=>this.leftAction()} rightBtnName='清空'/>
                 <PullList
                     style={{}}   //刷新组件的style
                     onPullRelease={this.onPullRelease}
                     topIndicatorRender={this.topIndicatorRender}     //下拉刷新
                     topIndicatorHeight={60}            //顶部刷新指示组件的高度
                     dataSource={this.state.list}      //datasource
                     pageSize={5}                     //每次事件循环（每帧）渲染的行数。
                     initialListSize={5}             //初始时渲染几行数据
                     renderRow={this.renderRow}      //ListView数据
                     onEndReached={this.loadMore}    //加载更多
                     onEndReachedThreshold={10}      //调用onEndReached之前的临界值，单位是像素
                     renderFooter={this.renderFooter}  //下部菊花
                 />
             </View>
         );
     }
     /**
      * 下拉刷新请求
      */
     topIndicatorRender =(pulling, pullok, pullrelease) => {
         const hide = {position: 'absolute', left: -10000};
         const show = {position: 'relative', left: 0};
         if (pulling) {
             this.txtPulling && this.txtPulling.setNativeProps({style: show});
             this.txtPullok && this.txtPullok.setNativeProps({style: hide});
             this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
         } else if (pullok) {
             this.txtPulling && this.txtPulling.setNativeProps({style: hide});
             this.txtPullok && this.txtPullok.setNativeProps({style: show});
             this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
         } else if (pullrelease) {
             this.txtPulling && this.txtPulling.setNativeProps({style: hide});
             this.txtPullok && this.txtPullok.setNativeProps({style: hide});
             this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});
         }
         // 这里自定义下拉刷新UI
         return (
             <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
                 <ActivityIndicator size="small" color="gray" />
                 <Text ref={(c) => {this.txtPulling = c;}}>松开开始刷新</Text>
                 <Text ref={(c) => {this.txtPullok = c;}}>刷新开始</Text>
                 <Text ref={(c) => {this.txtPullrelease = c;}}>正在刷新,请稍等</Text>
             </View>
         );
     }
     /**
      * 返回到上一级
      */
     leftAction(){
         this.props.navigator.pop();
     }
     /**
      * 这里定义上拉加载UI
      */
     renderFooter = () => {
         if(this.state.nomore) {
             return null;
         }
         return (
             <View style={{height: 100}}>
                 <ActivityIndicator />
             </View>
         );
     }
     /**
      * 加载更多请求
      */
     loadMore =() =>{
         for(var i = 0; i < 5; i++) {
             this.dataSource.push({
                 type:1,
                 time:'10月19日20:1',
                 title: '浓香型',
                 origin: '四川绵阳',
                 number: '500吨',
                 year:'6年',
                 price:'20000/吨'
             })
         }
         setTimeout(() => {
             this.setState({
                 list: this.state.list.cloneWithRows(this.dataSource)
             });
         }, 1000);
     }

     renderRow(rowData){
        let type = rowData.type;
         if(type===1){//已发布
                 return(
                     <View style={styles.container}>

                         <View style={styles.divides}/>

                         <View style={styles.contentStyle}>
                             <View style={styles.titlecontentStyle}>
                                 <Text style={styles.titleStyle}>{rowData.title}</Text>
                                 <Image source={{uri:'released'}} style={styles.typeStyle}/>
                             </View>

                             <View style={styles.detailsStyle}>
                                 {/*--产区--*/}
                                 <View style={styles.regionStyle}>
                                     <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                     <Text style={styles.nameStyle}>产区</Text>
                                 </View>
                                 <View style={styles.divide}/>
                                 {/*--数量--*/}
                                 <View style={styles.numberStyle}>
                                     <Text style={styles.valueStyle}>{rowData.number}</Text>
                                     <Text style={styles.nameStyle}>数量</Text>
                                 </View>
                                 <View style={styles.divide}/>
                                 {/*--年份--*/}
                                 <View style={styles.yearStyle}>
                                     <Text style={styles.valueStyle}>{rowData.year}</Text>
                                     <Text style={styles.nameStyle}>年份</Text>
                                 </View>
                                 <View style={styles.divide}/>
                                 {/*--价格--*/}
                                 <View style={styles.priceStyle}>
                                     <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                                 </View>
                             </View>

                         </View>
                     </View>

                 );
         }else if (type ===2){//审核中
                 return(
                     <View style={styles.container}>

                         <View style={styles.divides}/>

                         <View style={styles.contentStyle}>
                             <View style={styles.titlecontentStyle}>
                                 <Text style={styles.titleStyle}>{rowData.title}</Text>
                                 <Image source={{uri:'examine'}} style={styles.typeStyle}/>
                             </View>

                             <View style={styles.detailsStyle}>
                                 {/*--产区--*/}
                                 <View style={styles.regionStyle}>
                                     <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                     <Text style={styles.nameStyle}>产区</Text>
                                 </View>
                                 <View style={styles.divide}/>
                                 {/*--数量--*/}
                                 <View style={styles.numberStyle}>
                                     <Text style={styles.valueStyle}>{rowData.number}</Text>
                                     <Text style={styles.nameStyle}>数量</Text>
                                 </View>
                                 <View style={styles.divide}/>
                                 {/*--年份--*/}
                                 <View style={styles.yearStyle}>
                                     <Text style={styles.valueStyle}>{rowData.year}</Text>
                                     <Text style={styles.nameStyle}>年份</Text>
                                 </View>
                                 <View style={styles.divide}/>
                                 {/*--价格--*/}
                                 <View style={styles.priceStyle}>
                                     <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                                 </View>
                             </View>

                         </View>
                     </View>

                 );

         }else if (type ===3){//已失效

             return(
                 <View style={styles.container}>

                     <View style={styles.divides}/>

                     <View style={styles.contentStyle}>
                         <View style={styles.titlecontentStyle}>
                             <Text style={styles.titleStyle}>{rowData.title}</Text>
                             <Image source={{uri:'expired'}} style={styles.typeStyle}/>
                         </View>

                         <View style={styles.detailsStyle}>
                             {/*--产区--*/}
                             <View style={styles.regionStyle}>
                                 <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                 <Text style={styles.nameStyle}>产区</Text>
                             </View>
                             <View style={styles.divide}/>
                             {/*--数量--*/}
                             <View style={styles.numberStyle}>
                                 <Text style={styles.valueStyle}>{rowData.number}</Text>
                                 <Text style={styles.nameStyle}>数量</Text>
                             </View>
                             <View style={styles.divide}/>
                             {/*--年份--*/}
                             <View style={styles.yearStyle}>
                                 <Text style={styles.valueStyle}>{rowData.year}</Text>
                                 <Text style={styles.nameStyle}>年份</Text>
                             </View>
                             <View style={styles.divide}/>
                             {/*--价格--*/}
                             <View style={styles.priceStyle}>
                                 <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                             </View>
                         </View>

                     </View>
                 </View>

             );

         }else if (type ===4){//已拒绝

             return(
                 <View style={styles.container}>

                     <View style={styles.divides}/>

                     <View style={styles.contentStyle}>
                         <View style={styles.titlecontentStyle}>
                             <Text style={styles.titleStyle}>{rowData.title}</Text>
                             <Image source={{uri:'rejected'}} style={styles.typeStyle}/>
                         </View>

                         <View style={styles.detailsStyle}>
                             {/*--产区--*/}
                             <View style={styles.regionStyle}>
                                 <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                 <Text style={styles.nameStyle}>产区</Text>
                             </View>
                             <View style={styles.divide}/>
                             {/*--数量--*/}
                             <View style={styles.numberStyle}>
                                 <Text style={styles.valueStyle}>{rowData.number}</Text>
                                 <Text style={styles.nameStyle}>数量</Text>
                             </View>
                             <View style={styles.divide}/>
                             {/*--年份--*/}
                             <View style={styles.yearStyle}>
                                 <Text style={styles.valueStyle}>{rowData.year}</Text>
                                 <Text style={styles.nameStyle}>年份</Text>
                             </View>
                             <View style={styles.divide}/>
                             {/*--价格--*/}
                             <View style={styles.priceStyle}>
                                 <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                             </View>
                         </View>

                     </View>
                 </View>

             );
         }
     }

     /**
      * 无收藏记录时显示此页面
      * @returns {XML}
      * @private
      */
     _renderNullRow(){
         return(
             <View style={styles.nullcontentStyles}>
                <Image source={{uri:'fabu'}} style={styles.nullImageStyle}/>
                 <Text style={styles.nullTextStyle}>
                     亲您没有发布记录 !
                 </Text>
             </View>
         );
     }

 }



var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5',
    },timeViewStyle: {
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop:10,
        marginBottom:10,
    },timeStyle:{
        backgroundColor:'#999999',
        paddingTop:5,
        paddingBottom:5,
        paddingLeft:10,
        paddingRight:10,
        color:'#fff',
        borderRadius:3,
        fontSize:10
    },contentStyle:{
        borderWidth:1,
        borderColor:'#e5e5e5',
        backgroundColor:'#fff',
        marginLeft:10,
        marginRight:10,
    },detailsStyle:{
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center',
        height:55,
        marginBottom:10
    },titleStyle:{
        marginTop:18,
        marginLeft:10,
        fontSize:15,
        fontWeight:'bold',
        color:'#333333'
    },regionStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        width:75,
    },numberStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        width:75,
    },yearStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        width:75,
    },priceStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        flex:1,
    },valueStyle:{
        fontSize:14,
        color:'#666666'
    },nameStyle:{
        fontSize:12,
        color:'#999999',
        marginTop:3
    },pricevalueStyle:{
        fontSize:16,
        color:'#8B0000'
    },divide:{
        width:1,
        height:32,
        backgroundColor:'#999'
    },line:{
        height:1,
        backgroundColor:'#999',
        marginBottom:5,
        marginLeft:10,
        marginRight:10
    },questionStyle:{
        justifyContent:'space-between',
        padding:10,
        flexDirection:'row',
    },imageStyle:{
        width:15,
        height:15,
        justifyContent: 'center',
        alignItems: 'center',
    },divides:{
        height:8
    },typeStyle:{
        width:61,
        height:47,
        marginRight:10
    },titlecontentStyle:{
        justifyContent:'space-between',
        flexDirection:'row',
    },nullImageStyle:{
        width:100,
        height:100,
        marginTop:120
    },nullTextStyle:{
        fontSize:15,
        color:'#666666',
        marginTop:45
    },nullcontentStyles:{
        flex: 1,
        backgroundColor: '#F5F5F5',
       alignItems:'center'
    }
});

//module.exports = Message;
